<template>
  <div class="home">
    <home-header></home-header>

    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in swiperList" :key="item.id">
        <img :src="item.imgURL" />
      </mt-swipe-item>
    </mt-swipe>

    <home-hot-city :cityList="cityList"></home-hot-city>
    <home-hot-guide :guideList="guideList"></home-hot-guide>
    <home-route-service :routeServiceList="routeServiceList"></home-route-service>
    <home-route-require :routeRequireList="routeRequireList"></home-route-require>
  </div>
</template>

<script>
import HomeHeader from "./components/Header";
import HomeHotCity from "./components/HotCity";
import HomeHotGuide from "./components/HotGuide";
import HomeRouteService from "./components/RouteService";
import HomeRouteRequire from "./components/RouteRequire";
import { mapState } from "vuex";
import { fetchPostData, fetchGetData } from "@/api/fetch.js";
export default {
  name: "home",
  data() {
    return {
      // city: "上海",
      lastCity: "",
      swiperList: [
        {
          id: "001",
          imgURL: "static/img/server/banner/banner1.jpg"
        },
        {
          id: "002",
          imgURL: "static/img/server/banner/banner2.jpg"
        },
        {
          id: "003",
          imgURL: "static/img/server/banner/banner3.jpg"
        },
        {
          id: "004",
          imgURL: "static/img/server/banner/banner4.jpg"
        },
        {
          id: "005",
          imgURL: "static/img/server/banner/banner5.jpg"
        }
      ],
      guideList: [],
      routeServiceList: [],
      routeRequireList: [],
      cityList: []
    };
  },
  methods: {
    getHomeInfo() {
      fetchPostData("/api/user/list", {
        pageNum: "1",
        pageSize: "4",
        isGuide: "1"
      }).then(data => {
        if (data.status == 1) {
          this.guideList = data.data.rows;
        } else {
          console.log("fail");
        }
      });
      fetchPostData("/api/route/requireList", {
        pageNum: "1",
        pageSize: "4"
      }).then(data => {
        if (data.status == 1) {
          this.routeRequireList = data.data.rows;
        } else {
          console.log("fail");
        }
      });
      fetchPostData("/api/route/serviceList", {
        pageNum: "1",
        pageSize: "4"
      }).then(data => {
        if (data.status == 1) {
          this.routeServiceList = data.data.rows;
        } else {
          console.log("fail");
        }
      });
      fetchPostData("/api/area/cityList", { pageSize: "9" }).then(res => {
        if (res.status == 1) {
          console.log(res.data);
          this.cityList = res.data.rows;
        } else {
          console.log("fail");
        }
      });
      //获取数据字典
      // if(localStorage.getItem('dictData') == null || localStorage.getItem('dictData') == "") {
      fetchGetData("/api/sysDict/allDictList", {}).then(data => {
        if (data.status == 1) {
          console.log(data);
          localStorage.setItem("dictData", JSON.stringify(data.data));
        }
      });
      // }
    }
  },
  mounted() {
    this.lastCity = this.city;
    this.getHomeInfo();
  },
  activated() {
    if (this.lastCity !== this.city) {
      this.lastCity = this.city;
      this.getHomeInfo();
    }
  },
  components: {
    HomeHeader,
    HomeHotCity,
    HomeHotGuide,
    HomeRouteService,
    HomeRouteRequire
  },
  computed: {
    ...mapState(["city"])
  }
};
</script>

<style lang="stylus" scoped>
.home {
  margin-bottom: 65px;
  padding-top: 41px;
  background-color #eee;

  .mint-swipe {
    overflow: hidden;
    width: 100%;
    padding-bottom: 60%;
    height: 0;
    background-color: #eee;
  }

  .mint-swipe >>> .mint-swipe-items-wrap {
    overflow: hidden;
    width: 100%;
    padding-bottom: 60%;
    height: 0;
  }

  .mint-swipe >>> .mint-swipe-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
}
</style>